<template>
		<!-- 1、创建容器 -->
		<div>
				<el-row>
						<el-col :span="4">
								111
						</el-col>
						<el-col :span="16">
								<div class="contentBox">
										<div class="btnBox">
												<el-button @click="clickAddNode('rect')">rect</el-button>
												<el-button @click="clickAddNode('circle')">circle</el-button>
												<el-button @click="clickAddNode('edge')">edge</el-button>
												<el-button @click="clickAddCustomNode">自定义节点</el-button>
												<el-button @click="clickEditNode">文字可以编辑</el-button>
												<el-button @click="clickEditDataNode">控制面板修改属性</el-button>
												<el-button @click="clickDataToJSON">dataToJSON</el-button>
										</div>
										<div id="index01" style="width: 100%;">
										</div>
								</div>
						</el-col>
						<el-col :span="4">
								<el-form :model="formModel" label-position="top">
										<el-form-item label="标签名称">
												<el-input autosize type="textarea" v-model="formModel.labelText"
																	@change="changeLabeltext"
												/>
										</el-form-item>
										<el-form-item label="userId">
												<el-input v-model="formModel.userId" @change="changeUserId"/>
										</el-form-item>
										<el-form-item label="roleId">
												<el-input v-model="formModel.roleId" @change="changeRoleId"/>
										</el-form-item>
								</el-form>
						</el-col>
				</el-row>
		</div>

</template>

<script>
import {onMounted, defineComponent, reactive, nextTick} from 'vue'
import {Graph, Shape, Node} from '@antv/x6';

/**
 * 2、准备数据
 */

export default defineComponent({
		setup() {
				let formModel = reactive({
						id: null,
						labelText: null,
						name: null,
						type: null,
						age: null,
						status: null
				})
				let graph = {}, container = {}, curCell = {};

				/**
				 * 3、进行画布的渲染
				 * 只能在onMounted生命周期里面
				 */
				onMounted(() => {
						container = document.getElementById('index01')

						graph = new Graph({
								container: container,
								// width: 1200,
								height: 600,
								background: {
										color: '#fffbe6', // 设置画布背景颜色
								},
								grid: {
										size: 10,      // 网格大小 10px
										visible: true, // 渲染网格背景
								},
						})
				})
				nextTick(() => {
						//设置节点点击事件
						graph.on('cell:click', ({cell}) => {
								//点击获取节点数据
								// console.log(cell)
								//将之前选中的节点样式清除
								curCell ?? curCell.attrs('body/stroke', null)
								// 新的节点赋值
								curCell = cell
								// 新的节点边框样式设置为红色
								curCell?.attr('body/stroke', 'red');
								console.log('节点被点击了')
								console.log(cell.data)

								let labelText = null;
								if (cell.getAttrs()?.text?.text) labelText = cell.getAttrs()?.text?.text;
								if (cell.getAttrs()?.label?.text) labelText = cell.getAttrs()?.label?.text;
								formModel.labelText = labelText
								formModel.userId = curCell.getData()?.userId
								formModel.roleId = curCell.getData()?.roleId
						})
				})
				/**
				 * 使用构造函数创建节点、边
				 * @param type
				 */
				const rect = new Shape.Rect({
						id: 'node1',
						x: 40,
						y: 40,
						width: 100,
						height: 40,
						label: 'rect',
						zIndex: 2,
						attrs: {
								body: {
										stroke: 'blue',//边框颜色
										fill: 'red',//填充颜色
								}
						}
				})
				const circle = new Shape.Circle({
						id: 'node2',
						x: 280,
						y: 200,
						width: 60,
						height: 60,
						label: 'circle',
						zIndex: 2,
				})
				const edge = new Shape.Edge({
						id: 'edge1',
						source: rect,
						target: circle,
						zIndex: 1,
				})
				const clickAddNode = (type) => {
						switch (type) {
								case 'rect':
										graph.addNode(rect)
										break
								case 'circle':
										graph.addNode(circle)
										break
								case 'edge':
										graph.addEdge(edge)
										break
						}
				}
				/**
				 * 添加自定义节点练习
				 * markup：数组可以自定义多个节点 F12 Ctrl+Shift+C 可以查看节点
				 */
				const clickAddCustomNode = () => {
						const customNode = new Node({
								x: 400,
								y: 350,
								width: 200,
								height: 60,
								markup: [
										//selector:选择器优先级比tagName标签选择高
										{
												tagName: 'rect',
												selector: 'body',
										},
										{
												tagName: 'text',
												selector: 'label',
										},
								],
								attrs: {
										//图形配置
										rect: {
												ref: 'label',
												stroke: '#000',
												fill: '#fff',
												rx: 3,
												ry: 3,
												refWidth: 100,
												refHeight: 100,
												refX: -50,
												refYL: -50
										},
										text: {
												// fill: '#333',
												fontSize: 14,
												textAnchor: 'middle',
												textVerticalAnchor: 'middle'
										},
										label: {
												text: '自定义node'
										}
								}
						})
						graph.addNode(customNode)
				}
				const textBlock = new Shape.TextBlock({
						x: 300,
						y: 40,
						width: 360,
						height: 120,
						text: '文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字',
						attrs: {
								label: {
										contenteditable: "true",//文字可编辑
								},
								body: {
										fill: '#efdbff',
										stroke: '#9254de',
										rx: 4,
										ry: 4
								}
						},
						data: {
								id: 1,
								name: 'QL',
								age: 18,
								status: false
						}
				})
				const clickEditNode = () => {

						graph.addNode(textBlock)
				}
				//控制面板操作数据
				const clickEditDataNode = () => {
						const nodeData = {
								x: 300,
								y: 200,
								width: 200,
								height: 60,
								attrs: {
										label: {
												text: 'rect',
												fill: 'blue'
										}
								},
								data: {
										userId: 1,
										roleId: 1
								}
						}
						graph.addNode(nodeData)
				}
				const clickDataToJSON = () => {
						console.log(graph.toJSON())
				}
				const changeLabeltext = () => {
						curCell.attr('label/text', formModel.labelText)
				}
				const changeUserId = () => {
						curCell?.setData({
								userId: formModel.userId
						})
				}
				const changeRoleId = () => {
						curCell?.setData({
								roleId: formModel.roleId
						})
				}

				return {
						formModel,
						clickAddNode,
						clickAddCustomNode,
						clickEditNode,
						clickEditDataNode,
						clickDataToJSON,
						changeLabeltext,
						changeUserId,
						changeRoleId
				}
		}
})
</script>

<style scoped>
.contentBox {
		display: flex;
		flex-direction: column;
		align-items: center;
}

.btnBox {
		margin: 10px 0;
}
</style>